<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>个人资料编辑</title>
        <style>
            /*页头部分 勿改*/
            /*设置div背景色为white*/
            /*以下部分和页脚部分统一*/
            body{margin: 0;
                background-color: #f9f9f9;  }
            a{text-decoration:none}
            .banner {
                z-index:99999;
                width:100%;
                height:70px;
                top:0;
                left:0;
                position: fixed;
                overflow: hidden;
                background: #fff;
                border-bottom: 1px solid rgba(30,35,42,.06);
                box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
                background-clip: content-box;
                background-color: white;
                filter:alpha(Opacity=50);
                opacity: 0.95;
            }
            #logo {
                margin-top: 11px;
                margin-left: 42px;
                width: 115px;
                height: 46px;

            }
            .searchDiv{
                position: relative;
                top: -75px;
                left: 182px;
                height: 40px;
                width: 224px;
                border: 0;
            }
            #search {
                position: relative;
                top: 30px;
                left: 0;
                width: 224px;
                height: 30px;
                -webkit-border-radius:3px;
                -webkit-appearance: none;
                border-radius: 3px;
                border: 1px solid #999999;
                font-size: 13px;
                background-color: transparent;
            }
            #btnLeft{
                margin-left: 30px;
                width: 235px;
                position: absolute;
                right: 12.6%;
                top: 20px;
            }
            #searchicon{
                position: relative;
                bottom: 0;
                left: 195px;
                width: 28px;
                height: 28px;
            }
            #hpBtn{
                width: 112px;
                height: 30px;
                -webkit-border-radius:3px;
                -webkit-appearance: none;
                border-radius: 3px;
                border: 1px solid #999999;
                background-color: white;
                font: normal 15px 微软雅黑 ;
                color: #666666;
                float: right;
            }
            #ppBtn{
                margin-right: 7px;
                float: right;
                width: 112px;
                height: 30px;
                -webkit-border-radius:3px;
                -webkit-appearance: none;
                border-radius: 3px;
                border: 1px solid #999999;
                background-color: white;
                font: normal 15px 微软雅黑 ;
                color: #666666;
            }
            /*页脚*/
            footer{
                bottom: 0;
                width: 100%;
                height: 60px;
                clear: both;
                padding-top: 60px;
                padding-bottom: 0;
            }
            #footer{
                text-align: center;
                background-color: white;
                height: 40px;
                width: 100%;
                margin-top: 20px;
                overflow: hidden;
                box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
                background-clip: content-box;
            }
            #footText{
                height: 20px;
                margin: 5px auto;
            }


            /*--------------以下是页面独有样式-----------------*/

            /*个人资料总框*/
            .personalDataFrame{
                top:120px;
                margin:50px auto;
                width:1076px;
                height:800px;
                position:relative;
                overflow:hidden;
                background: #fff;
                border-top: 1px solid rgba(30,35,42,.06);
                border-bottom: 1px solid rgba(30,35,42,.06);
                border-left: 1px solid rgba(30,35,42,.06);
                border-right: 1px solid rgba(30,35,42,.06);
                box-shadow: 0px 5px 5px 5px rgba(0,34,77,.05);
                background-clip: content-box;
            }
            /*头像框*/
            .dataPorFrame{
                position:absolute;
                left:35px;
                top:25px;
            }
            /*修改头像按钮*/
            #submitBtnD{
                height:30px;
                width:140px;
                left:20px;
                position: absolute;
                font:normal 14px 微软雅黑;
                border: 1px solid #999999;
                -webkit-border-radius:3px;
                -webkit-appearance: none;
                border-radius: 3px;
                background-color: #ffffff;
                color: #666666;
                margin-top: 15px;
            }
            /*字符框*/
            .dataFrame{
                margin:0;
                margin-left:275px;
                margin-top:65px;
                line-height:110px;
                font: normal 24px 微软雅黑;
            }
            /*单独数据框*/
            .dataFrameSon{
                width:720px;
                height:60px;
                position: relative;
                overflow: hidden;
                background: #fff;
                border-bottom: 1px solid rgba(30,35,42,.06);
                box-shadow: 0 1px 2px 0 rgba(0,34,77,.05);
                background-clip: content-box;
                font: normal 18px 微软雅黑;
                line-height:45px;
                margin:0 auto
            }
            #userName{
                text-indent:10px;
                font: normal 17px 微软雅黑;
                width:600px;
                height: 26px;
                border: 0;
                background-color: aliceblue;
            }
            #sex{
                text-indent:10px;
                font: normal 17px 微软雅黑;
                width:600px;
                height: 26px;
                border: 0;
                background-color: aliceblue;
            }
            #auto{
                text-indent:10px;
                font: normal 17px 微软雅黑;
                width:600px;
                height: 26px;
                border: 0;
                background-color: aliceblue;
            }
            #profession{
                text-indent:10px;
                font: normal 17px 微软雅黑;
                width:600px;
                height: 26px;
                border: 0;
                background-color: aliceblue;
            }
            #location{
                text-indent:10px;
                font: normal 17px 微软雅黑;
                width:600px;
                height: 26px;
                border: 0;
                background-color: aliceblue;
            }
            /*保存按钮*/
            #submitBtnSave{
                position: absolute;
                font:normal 14px 微软雅黑;
                border: 1px solid #999999;
                -webkit-border-radius:3px;
                -webkit-appearance: none;
                border-radius: 3px;
                background-color: #ffffff;
                color: #666666;
                margin-top: 0;
                height:30px;
                width:200px;
                display:inline-block;
                margin-left:28%;
            }
    </style>
</head>

    <body>
        <!--页头块-->
        <div class="banner">
            <img src="logologin.png" id="logo"/>
            <div class="searchDiv">
                <input type="text" name="keyword" id="search" placeholder=" 请输入您要搜索的关键字">
                <a href="https://www.baidu.com"><img src="搜索.png" id="searchicon" /></a>
            </div>
            <div id="btnLeft">
                <input type="button" name="homepage" id="hpBtn" value="个人中心">
                <input type="button" name="homepage" id="ppBtn" value="首页">
            </div>
        </div >

        <!--个人资料块-->
        <div class="personalDataFrame">
            <!--头像-->
            <div class="dataPorFrame">
                <img id="dataPor" src="头像.png" width="180" height="180" style="border-radius: 10px;">
                <input  type="submit" name="submit" id="submitBtnD" value="修改头像" >
            </div>
            <!--字符-->
            <div class="dataFrame" >
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;个人资料</p><br/>
                    <div id="peronalData.name" class="dataFrameSon" name="persnaolData.name">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名:</di> <input   type="text" name="userName" id="userName" >
                    </div><br/>
                    <div id="peronalData.sex" class="dataFrameSon" name="personalData.sex">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别: <input   type="text" name="sex" id="sex" >
                    </div><br/>
                    <div id="peronalData.auto" class="dataFrameSon" name="personalData.auto">
                        &nbsp;&nbsp;个性签名：<input   type="text" name="auto" id="auto" >
                    </div><br/>
                    <div id="peronalData.pro" class="dataFrameSon" name="personalData.pro">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;职业：<input   type="text" name="profession" id="profession" >
                    </div><br/>
                    <div id="peronalData.loc" class="dataFrameSon" name="personalData.loc">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所在地：<input   type="text" name="lacation" id="location">
                    </div><br/><br/>
                    <input type="submit" name="submit" id="submitBtnSave" value="保存">

            </div>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
        <!--页脚部分-->
        <!--页脚部分已预留上边缘，无需再留-->
        <!--logo图片为文件夹中的giggleIcon.png-->
        <footer>
            <div id="footer">
                <div id="footText">
                    <img src="giggleIcon.png" style="width: 20px;height: 20px;margin-bottom: -6px"   >
                    <em style="font: 13px 微软雅黑;color: #999999;">giggle</em>
                    <a href="https://www.baidu.com/" style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">关于我们</a>
                    <em style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">© 2017 Zealers 版权所有</em>
                </div>
            </div>
        </footer>
        <!--页脚部分结束-->
    </body>
</html>
